import type { FormInstance } from 'element-plus'
import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import type { UseTaskGroupHardwareEnumType } from '~/store/monitorManagement/loopMonitorBox/typings'
import type {
  WeeklyTasksTableDataItemPropsType,
  WeeklyTasksFormValuesType,
  WeeklyTasksStateType
} from './typings'
import { defineComponent, ref, reactive, onMounted, nextTick } from 'vue'
import { useStore } from 'vuex'
import { keys, values } from 'lodash'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import {
  ElCard,
  ElButton,
  ElLink,
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElSpace,
  ElInput,
  ElRadioGroup,
  ElRadio,
  ElCheckbox,
  ElDatePicker,
  ElInputNumber,
  ElSelect,
  ElOption,
  ElTimeSelect,
  ElDivider,
  ElMessage,
  ElMessageBox
} from 'element-plus'
import WeeklyTasksTips from './WeeklyTasksTips'
import AliIcon from '~/components/AliIocn'
import SaasTitle from '~/components/SaasTitle'
import ProSaasTable from '~/components/ProSaasTable'
import InputTextarea from '~/components/ProForm/InputTextarea'
import useVuexGetters from '~/hooks/useVuexGetters'
import { GUTTER, SPAN_STYLE_DOUBLE } from '~/utils/const'
import styles from '../../index.module.scss'

dayjs.extend(duration)

export default defineComponent({
  name: 'WeeklyTasksComponent',
  props: ['detail', 'goBack'],
  setup(props: { detail: WeeklyTasksFormValuesType; goBack: () => void }) {
    const store = useStore()
    const ruleFormRef = ref<FormInstance>()
    const formValues = reactive<WeeklyTasksFormValuesType>({})
    const state = reactive<WeeklyTasksStateType>({
      loading: false,
      submitLoading: false,
      enableLightControl: false,
      indeterminateLightControl: false,
      enableOffset: false,
      indeterminateOffset: false,
      weekSunsierList: []
    })
    const loopSwitchGroupState = useVuexGetters('loopSwitchGroup', [
      'useTaskGroupHardwareSelectList',
      'noUseTaskGroupHardwareSelectList'
    ])

    // 切换启用偏移复选框并判断是否是选中 是选中则计算对应的偏移值
    const handleChangeSunOffsetCheckbox = (checked: boolean, taskIndex: number) => {
      if (!checked) return

      const onTime = formValues.detailList![taskIndex].onTime!?.split(':')
      const offTime = formValues.detailList![taskIndex].offTime!?.split(':')
      // 偏移时控开灯时间
      formValues.detailList![taskIndex].lastOnTime = dayjs()
        .hour(onTime[0] as unknown as number)
        .minute(onTime[1] as unknown as number)
        .add(dayjs.duration({ minutes: formValues.onSumValue ?? 0 }))
        .format('HH:mm')

      // 偏移时控关灯时间
      formValues.detailList![taskIndex].lastOffTime = dayjs()
        .hour(offTime[0] as unknown as number)
        .minute(offTime[1] as unknown as number)
        .add(dayjs.duration({ minutes: formValues.offSunValue ?? 0 }))
        .format('HH:mm')
    }

    // 切换偏移时时控开关时间选择
    const handleChangeOffsetTimeSelect = (
      taskIndex: number,
      value: string,
      type: 'lastOnTime' | 'lastOffTime'
    ) => {
      if (!value) return
      const filterValue = value?.split(':')

      if (type === 'lastOnTime') {
        const lightOnTimeEnd = dayjs()
          .hour(filterValue[0] as unknown as number)
          .minute(filterValue[1] as unknown as number)
        formValues.detailList![taskIndex].lightOnTimeBegin = lightOnTimeEnd
          .subtract(formValues.lightCtrlTime ?? 0, 'minutes')
          .format('HH:mm')
        formValues.detailList![taskIndex].lightOnTimeEnd = lightOnTimeEnd.format('HH:mm')
        return
      }

      const lightOffTimeEnd = dayjs()
        .hour(filterValue[0] as unknown as number)
        .minute(filterValue[1] as unknown as number)
      formValues.detailList![taskIndex].lightOffTimeBegin = lightOffTimeEnd
        .subtract(formValues.lightCtrlTime ?? 0, 'minutes')
        .format('HH:mm')
      formValues.detailList![taskIndex].lightOffTimeEnd = lightOffTimeEnd.format('HH:mm')
    }

    // 遍历所有复选框将勾选偏移的时间重新计算
    const handeChangeCheckedOffsetTime = () => {
      if (formValues.detailList)
        keys(formValues.detailList)?.forEach((key: number) => {
          handleChangeSunOffsetCheckbox(!!formValues.detailList?.[key]?.isOnSunOffset, key)
        })
    }

    // 遍历所有复选框将勾选光控的时间重新计算
    const handeChangeCheckedLightTime = () => {
      if (formValues.detailList)
        keys(formValues.detailList)?.forEach((key: number) => {
          if (formValues.detailList![key]?.isOnLightCtrl) {
            handleChangeOffsetTimeSelect(key, formValues.detailList![key].lastOnTime!, 'lastOnTime')
            handleChangeOffsetTimeSelect(
              key,
              formValues.detailList![key].lastOffTime!,
              'lastOffTime'
            )
          } else {
            formValues.detailList![key].lightOnTimeBegin =
              formValues.detailList![key].lightOnTimeEnd
            formValues.detailList![key].lightOffTimeBegin =
              formValues.detailList![key].lightOffTimeEnd
          }
        })
    }

    // 切换复选框实现全选全不选效果
    const handleChangeAllCheckboxState = (
      checked: boolean,
      type: 'isOnLightCtrl' | 'isOnSunOffset'
    ) => {
      if (type === 'isOnLightCtrl') {
        state.enableLightControl = checked
        state.indeterminateLightControl = false
      } else {
        state.enableOffset = checked
        state.indeterminateOffset = false
      }
      if (formValues.detailList)
        keys(formValues.detailList)?.forEach((key: number) => {
          formValues.detailList![key][type] = checked
          if (checked && type === 'isOnSunOffset') handleChangeSunOffsetCheckbox(checked, key)
          if (type === 'isOnLightCtrl') {
            if (checked) {
              handleChangeOffsetTimeSelect(
                key,
                formValues.detailList![key].lastOnTime!,
                'lastOnTime'
              )
              handleChangeOffsetTimeSelect(
                key,
                formValues.detailList![key].lastOffTime!,
                'lastOffTime'
              )
            } else {
              formValues.detailList![key].lightOnTimeBegin =
                formValues.detailList![key].lightOnTimeEnd
              formValues.detailList![key].lightOffTimeBegin =
                formValues.detailList![key].lightOffTimeEnd
            }
          }
        })
    }

    // 切换单个复选框 判断影响全选还是半选
    const handleChangeCheckboxItemState = (type: 'isOnLightCtrl' | 'isOnSunOffset') => {
      const checkedList = keys(formValues.detailList)?.filter(
        (key: string) => formValues.detailList![key][type]
      )
      if (type === 'isOnLightCtrl') {
        state.enableLightControl = checkedList.length === state.weekSunsierList.length
        state.indeterminateLightControl =
          checkedList.length && checkedList.length !== state.weekSunsierList.length
        handeChangeCheckedLightTime()
      } else {
        state.enableOffset = checkedList.length === state.weekSunsierList.length
        state.indeterminateOffset =
          checkedList.length && checkedList.length !== state.weekSunsierList.length
      }
    }

    // 提交表单数据
    const handleSubmitForm = () => {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validate(async (valid) => {
        if (!valid) return
        state.submitLoading = true
        const params = {
          taskType: 1,
          ...formValues,
          detailList1: values(formValues.detailList)?.map(
            (item: WeeklyTasksTableDataItemPropsType) => ({
              ...item,
              isOnLightCtrl: item.isOnLightCtrl ? 1 : 0,
              isOnSunOffset: item.isOnSunOffset ? 1 : 0
            })
          )
        }
        if (formValues.taskTime?.length) {
          params.taskBegin = dayjs(formValues.taskTime[0]).format('YYYY-MM-DD')
          params.taskEnd = dayjs(formValues.taskTime[1]).format('YYYY-MM-DD')
        }
        if (formValues.taskGroupIdsList) params.taskGroupIds = formValues.taskGroupIdsList.join(',')
        params.taskTrem = params.taskTrem ? 1 : 0
        delete params.detailList
        const res = await store.dispatch(
          formValues?.id
            ? 'switchLightStrategy/UpdateMonitoSwitchLightTaskInfo'
            : 'switchLightStrategy/AddMonitoSwitchLightTaskInfo',
          params
        )
        state.submitLoading = false
        if (res?.success) {
          if (res?.data?.isSuccess === 0) {
            ElMessageBox.alert('确认提示', res?.data?.msg, {
              confirmButtonText: '确认',
              closeOnClickModal: false, // 点遮罩层不关弹窗
              draggable: true // 可拖拽
            })
              .then(() => {})
              .catch(() => {})
            return
          }
          ElMessage({ type: 'success', message: '操作成功' })
          props.goBack()
        }
      })
    }

    // 获取周设置信息并初始化表单数据（新增专用）
    const handleGetWeekSunsierData = async () => {
      state.loading = true
      const res = await store.dispatch('switchLightStrategy/GetWeekSunsierDetails')

      state.weekSunsierList =
        res?.data?.map?.((item: WeeklyTasksTableDataItemPropsType) => ({
          ...item,
          taskTimeSlot: dayjs().day(item.taskTimeSlot!).format('ddd'),
          taskIndex: item.taskTimeSlot
        })) || []
      // 设置表单默认值
      Object.assign(formValues, props.detail || {}, {
        detailList: res?.data
          ? res.data?.reduce(
              (
                detailList: WeeklyTasksFormValuesType['detailList'],
                item: WeeklyTasksTableDataItemPropsType
              ) => {
                if (item.taskTimeSlot)
                  detailList![item.taskTimeSlot] = {
                    ...item,
                    isOnLightCtrl: !!item.isOnLightCtrl,
                    isOnSunOffset: !!item.isOnSunOffset
                  }
                return detailList
              },
              {}
            )
          : {}
      })
      nextTick(() => {
        state.loading = false
      })
    }

    // 根据props.detail.id获取详情
    const handleGetWeeklyTaskInfo = async () => {
      state.loading = true
      const res = await store.dispatch('switchLightStrategy/GetMonitoSwitchLightTaskInfo', {
        id: props.detail?.id
      })

      state.weekSunsierList =
        res?.data.detailList1?.map?.((item: WeeklyTasksTableDataItemPropsType) => ({
          ...item,
          taskTimeSlot: dayjs().day(item.taskTimeSlot!).format('ddd'),
          taskIndex: item.taskTimeSlot
        })) || []
      // 记录下列表勾选中的次数 后再根据勾选的数量判断判断是否半选还是勾选
      let checkedLightControl = 0
      let checkedOffset = 0
      // 设置表单默认值
      Object.assign(
        formValues,
        {
          taskGroupIdsList: res?.data?.taskGroupIds ? res?.data?.taskGroupIds?.split?.(',') : [],
          taskTime:
            res?.data?.taskBegin && res?.data?.taskEnd
              ? [res?.data?.taskBegin, res?.data?.taskEnd]
              : undefined
        },
        {
          detailList: res?.data?.detailList1
            ? res?.data?.detailList1?.reduce(
                (
                  detailList: WeeklyTasksFormValuesType['detailList'],
                  item: WeeklyTasksTableDataItemPropsType
                ) => {
                  if (item.taskTimeSlot)
                    detailList![item.taskTimeSlot] = {
                      ...item,
                      isOnLightCtrl: !!item.isOnLightCtrl,
                      isOnSunOffset: !!item.isOnSunOffset
                    }
                  if (item.isOnLightCtrl) checkedLightControl++
                  if (item.isOnSunOffset) checkedOffset++
                  return detailList
                },
                {}
              )
            : {}
        }
      )
      if (res?.data?.detailList1?.length) {
        if (res?.data?.detailList1?.length === checkedLightControl && checkedLightControl !== 0) {
          state.enableLightControl = true
        }
        if (res?.data?.detailList1?.length > checkedLightControl && checkedLightControl !== 0) {
          state.indeterminateLightControl = true
        }
        if (res?.data?.detailList1?.length === checkedOffset && checkedOffset !== 0) {
          state.enableOffset = true
        }
        if (res?.data?.detailList1?.length > checkedOffset && checkedOffset !== 0) {
          state.indeterminateOffset = true
        }
      }

      state.loading = false
    }

    onMounted(async () => {
      store.dispatch('loopSwitchGroup/GetUseTaskGroupHardwareList')

      // 设置表单默认值
      Object.assign(formValues, props.detail || {})
      // 判断是否为新增还是修改
      if (props.detail?.id) {
        await handleGetWeeklyTaskInfo()
      } else {
        handleGetWeekSunsierData()
      }
    })

    const columns: TableColumnProps<WeeklyTasksTableDataItemPropsType>[] = [
      {
        label: '选项',
        prop: 'taskTimeSlot',
        minWidth: 170,
        align: 'center',
        render: ({ row }, propValue) => (
          <>
            {propValue}
            {dayjs().format('d') === row.taskIndex?.toString() && (
              <ElLink type="primary" underline={false}>
                (今天)
              </ElLink>
            )}
          </>
        )
      },
      {
        label: '启用光控',
        prop: 'isOnLightCtrl',
        minWidth: 170,
        align: 'center',
        renderHeader: ({ column }) => (
          <ElCheckbox
            class={styles['weekly-task-table-title']}
            v-model={state.enableLightControl}
            indeterminate={state.indeterminateLightControl}
            onChange={(checked) =>
              handleChangeAllCheckboxState(checked as boolean, 'isOnLightCtrl')
            }
          >
            {column.label}
          </ElCheckbox>
        ),
        render: ({ row }) => (
          <ElFormItem
            class={styles['weekly-task-table-form-item']}
            labelWidth="auto"
            prop={`detailList.${row.taskIndex}.isOnLightCtrl`}
          >
            <ElCheckbox
              v-model={formValues.detailList![row.taskIndex!].isOnLightCtrl}
              onChange={() => handleChangeCheckboxItemState('isOnLightCtrl')}
            />
          </ElFormItem>
        )
      },
      {
        label: '启用偏移',
        prop: 'isOnSunOffset',
        minWidth: 170,
        align: 'center',
        renderHeader: ({ column }) => (
          <ElCheckbox
            class={styles['weekly-task-table-title']}
            v-model={state.enableOffset}
            indeterminate={state.indeterminateOffset}
            onChange={(checked) =>
              handleChangeAllCheckboxState(checked as boolean, 'isOnSunOffset')
            }
          >
            {column.label}
          </ElCheckbox>
        ),
        render: ({ row }) => (
          <ElFormItem
            class={styles['weekly-task-table-form-item']}
            labelWidth="auto"
            prop={`detailList.${row.taskIndex}.isOnSunOffset`}
          >
            <ElCheckbox
              v-model={formValues.detailList![row.taskIndex!].isOnSunOffset}
              onChange={(checked) => {
                handleChangeCheckboxItemState('isOnSunOffset')
                handleChangeSunOffsetCheckbox(checked as boolean, row.taskIndex!)
                handleChangeOffsetTimeSelect(
                  row.taskIndex!,
                  formValues.detailList![row.taskIndex!].lastOnTime!,
                  'lastOnTime'
                )
                handleChangeOffsetTimeSelect(
                  row.taskIndex!,
                  formValues.detailList![row.taskIndex!].lastOffTime!,
                  'lastOffTime'
                )
              }}
            />
          </ElFormItem>
        )
      },
      {
        label: '日落时间',
        prop: 'onTime',
        minWidth: 170,
        align: 'center',
        renderHeader: ({ column }) => (
          <ElLink
            class={styles['weekly-task-table-title']}
            underline={false}
            icon={<AliIcon type="icon-rila" />}
          >
            {column.label}
          </ElLink>
        )
      },
      {
        label: '日出时间',
        prop: 'offTime',
        minWidth: 170,
        align: 'center',
        renderHeader: ({ column }) => (
          <ElLink
            class={styles['weekly-task-table-title']}
            underline={false}
            icon={<AliIcon type="icon-richu1" />}
          >
            {column.label}
          </ElLink>
        )
      },
      {
        label: '偏移时控开灯时间',
        prop: 'lastOnTime',
        minWidth: 220,
        align: 'center',
        render: ({ row }) => (
          <ElFormItem
            class={styles['weekly-task-table-form-item']}
            labelWidth="auto"
            prop={`detailList.${row.taskIndex}.lastOnTime`}
            rules={[
              {
                required: true,
                message: '请选择偏移时控开灯时间'
              }
            ]}
          >
            <ElTimeSelect
              disabled={formValues.detailList![row.taskIndex!].isOnSunOffset}
              v-model={formValues.detailList![row.taskIndex!].lastOnTime}
              step="00:05"
              start="00:00"
              end="23:59"
              clearable={false}
              onChange={(value) =>
                handleChangeOffsetTimeSelect(row.taskIndex!, value, 'lastOnTime')
              }
            />
          </ElFormItem>
        )
      },
      {
        label: '偏移时控关灯时间',
        prop: 'lastOffTime',
        minWidth: 220,
        align: 'center',
        render: ({ row }) => (
          <ElFormItem
            class={styles['weekly-task-table-form-item']}
            labelWidth="auto"
            prop={`detailList.${row.taskIndex}.lastOffTime`}
            rules={[
              {
                required: true,
                message: '请选择偏移时控关灯时间'
              }
            ]}
          >
            <ElTimeSelect
              disabled={formValues.detailList![row.taskIndex!].isOnSunOffset}
              v-model={formValues.detailList![row.taskIndex!].lastOffTime}
              step="00:05"
              start="00:00"
              end="23:59"
              clearable={false}
              onChange={(value) =>
                handleChangeOffsetTimeSelect(row.taskIndex!, value, 'lastOffTime')
              }
            />
          </ElFormItem>
        )
      },
      {
        label: '光控开灯作用时间',
        prop: 'lightOnTimeBegin',
        minWidth: 200,
        align: 'center',
        render: ({ row }) => (
          <>
            {formValues.detailList![row.taskIndex!]?.lightOnTimeBegin}
            {formValues.detailList![row.taskIndex!]?.lightOnTimeBegin &&
            formValues.detailList![row.taskIndex!]?.lightOnTimeEnd
              ? '~'
              : ''}
            {formValues.detailList![row.taskIndex!]?.lightOnTimeEnd}
          </>
        )
      },
      {
        label: '光控关灯作用时间',
        prop: 'lightOffTimeBegin',
        minWidth: 200,
        align: 'center',
        render: ({ row }) => (
          <>
            {formValues.detailList![row.taskIndex!]?.lightOffTimeBegin}
            {formValues.detailList![row.taskIndex!]?.lightOffTimeBegin &&
            formValues.detailList![row.taskIndex!]?.lightOffTimeEnd
              ? '~'
              : ''}
            {formValues.detailList![row.taskIndex!]?.lightOffTimeEnd}
          </>
        )
      }
    ]

    return () => (
      <ElCard
        shadow="never"
        class={{
          'covered-with-info-content': true,
          'covered-with-info-has-option-btn': true
        }}
        v-slots={{
          header: () => (
            <section class={styles['loop-group-tree-header']}>
              <SaasTitle type="primary">
                {props?.detail?.id ? '修改' : '新增'}周设置任务 &emsp;
                <WeeklyTasksTips />
              </SaasTitle>
              <ElButton text type="primary" onClick={props.goBack}>
                返回上一级&nbsp;
                <AliIcon type="icon-fanhuishangyiji" />
              </ElButton>
            </section>
          )
        }}
      >
        <ElForm ref={ruleFormRef} model={formValues} labelWidth={110}>
          <ElRow gutter={GUTTER}>
            <ElCol {...SPAN_STYLE_DOUBLE}>
              <ElLink underline={false} class={styles['task-info-title']}>
                基础信息
              </ElLink>
              <ElRow gutter={GUTTER}>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    prop="taskName"
                    label="任务名称"
                    rules={[
                      {
                        required: true,
                        min: 3,
                        max: 20,
                        message: '任务名称 3 ~ 20 字符'
                      }
                    ]}
                  >
                    <ElInput
                      v-model={formValues.taskName}
                      placeholder="请输入任务名称"
                      {...{ minlength: 3, maxlength: 20 }}
                    />
                  </ElFormItem>
                  <ElFormItem prop="taskDesc" label="备注说明">
                    <InputTextarea
                      v-model:inputTextareaValue={formValues.taskDesc}
                      placeholderName="请输入内容"
                      limitLength={200}
                    />
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    prop="taskTrem"
                    label="有效周期"
                    rules={[
                      {
                        required: true,
                        message: '请选择有效周期'
                      }
                    ]}
                  >
                    <ElRadioGroup
                      v-model={formValues.taskTrem}
                      onChange={() => ruleFormRef.value?.validateField(['taskTime'])}
                    >
                      <ElRadio label={0}>长期有效</ElRadio>
                      <ElRadio label={1}>
                        <ElFormItem
                          prop="taskTime"
                          rules={[
                            {
                              required: formValues.taskTrem === 1,
                              message: '请选择时间范围'
                            }
                          ]}
                        >
                          <ElDatePicker
                            style={{ width: '100%' }}
                            type="daterange"
                            v-model={formValues.taskTime}
                            disabled={!formValues.taskTrem}
                            disabledDate={(time: Date) => time.getTime() < Date.now()}
                          />
                        </ElFormItem>
                      </ElRadio>
                    </ElRadioGroup>
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </ElCol>
            <ElCol {...SPAN_STYLE_DOUBLE}>
              <ElLink underline={false} class={styles['task-info-title']}>
                偏移设置
              </ElLink>
              <ElRow gutter={GUTTER}>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    label="开灯日落偏移"
                    prop="onSumValue"
                    rules={[
                      {
                        required: true,
                        message: '请输入开灯日落偏移'
                      }
                    ]}
                  >
                    <ElSpace class="info-form-item-full-space">
                      <ElInputNumber
                        v-model={formValues.onSumValue}
                        precision={0}
                        min={0}
                        max={60}
                        controls={false}
                        placeholder="请输入数字0 ~ 60"
                        onBlur={handeChangeCheckedOffsetTime}
                        // onBlur={() =>
                        //   handleChangeAllCheckboxState(state.enableOffset, 'isOnSunOffset')
                        // }
                      />
                      <ElFormItem label="分钟" labelWidth="auto" />
                    </ElSpace>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    label="关灯日落偏移"
                    prop="offSunValue"
                    rules={[
                      {
                        required: true,
                        message: '请输入关灯日落偏移'
                      }
                    ]}
                  >
                    <ElSpace class="info-form-item-full-space">
                      <ElInputNumber
                        v-model={formValues.offSunValue}
                        precision={0}
                        min={0}
                        max={60}
                        controls={false}
                        placeholder="请输入数字0 ~ 60"
                        onBlur={handeChangeCheckedOffsetTime}
                        // onBlur={() =>
                        //   handleChangeAllCheckboxState(state.enableOffset, 'isOnSunOffset')
                        // }
                      />
                      <ElFormItem label="分钟" labelWidth="auto" />
                    </ElSpace>
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </ElCol>
          </ElRow>
          <ElRow gutter={GUTTER}>
            <ElCol {...SPAN_STYLE_DOUBLE}>
              <ElLink underline={false} class={styles['task-info-title']}>
                光控设置
              </ElLink>
              <ElRow gutter={GUTTER}>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    label="开灯光控值"
                    prop="onLightLux"
                    rules={[
                      {
                        required: true,
                        message: '请输入开灯光控值'
                      }
                    ]}
                  >
                    <ElSpace class="info-form-item-full-space">
                      <ElInputNumber
                        v-model={formValues.onLightLux}
                        precision={0}
                        min={0}
                        max={10000}
                        controls={false}
                        placeholder="请输入数字0 ~ 10000"
                      />
                      <ElFormItem label="Lux" labelWidth="auto" />
                    </ElSpace>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    label="关灯光控值"
                    prop="offLightLux"
                    rules={[
                      {
                        required: true,
                        message: '请输入关灯光控值'
                      }
                    ]}
                  >
                    <ElSpace class="info-form-item-full-space">
                      <ElInputNumber
                        v-model={formValues.offLightLux}
                        precision={0}
                        min={0}
                        max={10000}
                        controls={false}
                        placeholder="请输入数字0 ~ 10000"
                      />
                      <ElFormItem label="Lux" labelWidth="auto" />
                    </ElSpace>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    label="有效时间"
                    prop="lightCtrlTime"
                    rules={[
                      {
                        required: true,
                        message: '请输入有效时间'
                      }
                    ]}
                  >
                    <ElSpace class="info-form-item-full-space">
                      <ElInputNumber
                        v-model={formValues.lightCtrlTime}
                        precision={0}
                        min={0}
                        max={60}
                        controls={false}
                        placeholder="请输入数字0 ~ 60"
                        onBlur={handeChangeCheckedLightTime}
                        // onBlur={() =>
                        //   handleChangeAllCheckboxState(state.enableOffset, 'isOnSunOffset')
                        // }
                      />
                      <ElFormItem label="分钟" labelWidth="auto" />
                    </ElSpace>
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </ElCol>
            <ElCol {...SPAN_STYLE_DOUBLE}>
              <ElLink underline={false} class={styles['task-info-title']}>
                设备应用
              </ElLink>
              <ElRow gutter={GUTTER}>
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem
                    prop="taskGroupIdsList"
                    label="设备分组"
                    rules={[
                      {
                        required: false,
                        message: '请选择设备分组'
                      }
                    ]}
                  >
                    <ElSelect
                      v-model={formValues.taskGroupIdsList}
                      placeholder="请选择设备分组"
                      filterable
                      multiple
                      collapseTags
                    >
                      {/* 新增时 */}
                      {!props?.detail?.id &&
                        loopSwitchGroupState.noUseTaskGroupHardwareSelectList.value?.map(
                          (item: UseTaskGroupHardwareEnumType) =>
                            item?.id && (
                              <ElOption
                                key={item?.id}
                                label={item?.groupName}
                                value={item?.id!}
                                disabled={
                                  !!item?.isUsed && !props.detail?.taskGroupIds?.includes(item?.id)
                                }
                              />
                            )
                        )}
                      {/* 修改时 */}
                      {props?.detail?.id &&
                        loopSwitchGroupState.useTaskGroupHardwareSelectList.value?.map(
                          (item: UseTaskGroupHardwareEnumType) =>
                            item?.id && (
                              <ElOption
                                key={item?.id}
                                label={item?.groupName}
                                value={item?.id!}
                                disabled={
                                  !!item?.isUsed && !props.detail?.taskGroupIds?.includes(item?.id)
                                }
                              />
                            )
                        )}
                    </ElSelect>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_DOUBLE} />
                <ElCol {...SPAN_STYLE_DOUBLE}>
                  <ElFormItem label="生效时间">
                    <ElCheckbox modelValue={true}>立即生效</ElCheckbox>
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </ElCol>
          </ElRow>

          <ElLink underline={false} class={styles['task-info-title']}>
            周设置
          </ElLink>
          <ProSaasTable<WeeklyTasksTableDataItemPropsType>
            columns={columns}
            rowKey="taskTimeSlot"
            data={state.loading ? [] : state.weekSunsierList}
            needPagination={false}
            loading={state.loading}
          />
          <section class={['fixed-option-btns', styles['form-values-btns-tool']]}>
            <ElDivider />
            <ElSpace>
              <ElButton type="primary" loading={state.submitLoading} onClick={handleSubmitForm}>
                保存应用
              </ElButton>
              <ElButton onClick={props.goBack}>取消</ElButton>
            </ElSpace>
          </section>
        </ElForm>
      </ElCard>
    )
  }
})
